<template>
  <div class="mobile-pie-chart">
    <div class="pie-chart" :style="{height: this.height +'px'}">
      <chart :options="option"></chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['legendData', 'seriesData', 'type', 'height'],
    data () {
      return {
        option: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            top: '0',
            type: 'scroll',
            selected: 3,
            data: this.legendData
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              center: ['50%', '56%'],
              radius: this.type === 1 ? '55%' : ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.seriesData
            }
          ]
        }
      }
    },
    methods: {},
    created () {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.mobile-pie-chart
  .pie-chart
    height 140px
    & > div, .echarts, canvas
      width 100% !important
      height 100% !important
</style>
